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Ih rela lte Sisi 
Menjelaskan provider state managemen 

Ini kasih sebuah contoh kasus disni ada sebuah aplikasi 
Diaplikasi ada switch button jika diklik maka berubah is warna 
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Di text diubah menjadi ember 

Jika aplikasi ini dibuat structur widget nya maka seperti ini 

Ada material app ada scafold dialmnya ada appbar dan text 

Body nya itu center supaya ditengah 

Ada column karena susun bawah 


Ada container itu kotak 

Ada row karena susun di samping secara horinzontal 

Didalm row ada text dan ada switch 

Jika mau buat aplikasi ini secara biasa 

Maka page ini kita buat stf widget karena ini diubah 

Semua anak scafold akan berubah text nya danwarna maka menjadi stf widget 
Maka kelamahan itu apa 

Jika di stsatte si aplikasi dia akan mnrender ulang seluruhan nya 

Semua di gambar ulang atau refresh 

Maka demikian akan pengharuh pemeorfance aplkiasi kita 

Padahal ubah Cuma warna text swich dia hanya 3 

Tapi kalau pakai stf maka diubah semuanya 

Hanya itu dgn kasus seperti ini terkait dgn state 

Contoh warna nya bisa kita pakai providers 

Nah cara kerja sepeti apa 

Didlaam aplikasi kita akan membuat satu buah class 

Shared state 

Dia akan menyimpan warna 

Kalau siwtch simpan boolean on off 

Cara kerja nya seperti apa 

Jadi siwtch ini diklik maka kasih tau class ini dia beritau ada perubahan ini 
Setelah melakukan perubahan si shared state dia beri tau kepada si yg berikaitan si 
text container dan siwtch 

Bagimana cara nya class kita bertindah sepertini 

Setelah dia akan perubahan dia akan beritau kepada yg membutuhkan 
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Cara nya sepeti apa 
Yg pertama dishared_state ini harus di implamen changeNotifier 


Ini yg pertamakali yg kita laukukan dia kasih tau kepada yg membutuhkan 
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title 
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IN Ke DU SSM « ci 
Scafoold ini kita bungkus lagi changeNotiferProvider dia akan menydeiakan objec 
Dari sharedState ini masih class 

Kita buat class nanti obejct disni 

Yg akan berfungsi ketika berubah kasih tau yg lain 

Setelah itu kita bungkus lagi 

Text copntainer siwth dgn consumer 

Consumer ini berfungsi menanda kan kasih beritau jika di state yg bersangkutan 
Jika ada perubahan dia beri tau kepada consumer yg tunggu diakasih tau langsung 
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Change Notifier " 
MaterialApp Shared State 


Change Notifier Provider 


appbar body Shared State 
(Instance) 


Consumer 
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IN ella cal Sla 


Kita buat satu buah class 
Lalu changeNotifier beritau perubahan terjadi pada dirinya 
Lalu buat changeNotifeierProvider kita buat object 


Setelah itu widget yg membutuhkan kita bungkus gn consumer 


21:16 


Untuk menungu notifikasi jika ada perubahan kasi tau kepad state yg membutuhkan 


Dibuat 


Karena buat provider ini tidak perlu buat stf widget gk masalah 


Maka buat stl 


Buat 
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yoid main() => runApp(MyAr 
) extends 


build(B ntext context) { 


returr 
home: 
appBar: 


Huri 


Lv} tonnectea Gevice 1S fully INSLdi1e0. (4 avaliabie) 
In order to run your application, type: 


Toe 
$ flutter run 


Rd sena 


08:34 21:16 


II rap a Fs 0 i| 
Selah appbar maka buat body 

Center 

Mainaxis center 

Didalam children kasih animatedContainer 
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cnid: Lumnk 


mainAxisAlignment: MainAx \lignme „center, 


margin: Edg ats .all(5), 
width: 100 
height: 16 
color: rs.lightBlue, 
duration: £ (milliseconds: 
», 
W( 
mainAxisAlignment: Ma AxisAlignment.center, 
children: <Widget>[], 


Mur 


Lv} tonnectea gevice 1S TUL1y InStaiied. (4 avaliabie) 


In order to run your application, type: 


5 cd . 
flutter run 


a nasa 
O1 


mi Ka a (SIS | Nee 
Kasih duration 500 
Kasih juga margin 


Dibawhanya kasih row 
Mai axisAlign center juga 
Pertama itu text dan swicth 
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children: 


margin: Ed | .all(5), 
width: 106 
height: 
color: rs.lightBlue, 
duration: Dura (milliseconds: 
), 
w( 
mainAxisAlignment: MainAxisAlig nt.center, 
children: <Widget>[ 
( », 
ch(value: true, onChanged: (newValue) (),), 
( ) 
l, 
) 
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Fun 


Lvj tonnectea Gevice 1S fully INSLalie0. (4 avaliabie) 
In order to run your application, type: 


$ cd: 
$ flutter run 


FD. osan 
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II Ke cal SS ME | 
Text bungkus lagi dgn container 
Agar tidak terlalu mepet 
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cniia: Lumnt 
mainAxisAlignment: MainAxi t.center, 
childr 
margin: Edg 
width: 100, 
height e 
color: lors.lightBlue, 
duration: rat (milliseconds: 


mainAxisAlignment lignment.center, 
children: ige 


er(margin: EdgeInsets.all(5), child: 
(value: true, onChanged: (newValue) {} 
er(margin: geInsets.all(5), child: 


Launching lib\main.dart on RNE L22 in debug mode... 


10:46 21:16 


maka lihat lagi hasil nya 
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cniia: Lumnt 
mainAxisAlignment: MainAxisAlignment.center, IN 
i P 
children: <Wid rovider State Management 


margin: g t .all(5), 
width: 

heigh € 

color: .lightBlue, 
duration: (milliseconds: 


mainAxisAlignment: M AxisAlignment.center, 

children: «Widg [ 
t (margin: ’>Insets.all(5), child: 
(value: true, onChanged: (newValue) { 
(margin: geInsets.all(5), child: 


FATAL: pthread_create (1868334 
5 FATAL: pthread_create [1 


: 2019- 
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I mm DU S Sa MP i| 
Lalu buat namanya aplikasi_color.dart 


Dalam nya buat class aplikasiColor with ChngeNotifer lalu tambhakan ini 
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raiat: ptnreaa create |150/> 
FATAL: pthread_create [1 
FATAL: pthread_join [1868 3 3S r or succeed 


3 FATAL: pthread join (1 RC18SingleThreadWorkerE succeed 
FATAL: pthread join (1 ð 18SingleThreadWorkerE succeed 


1) ee h SISI TA 
Kalau sudah kita buat satu buah boolean _ ini arti nya private untuk didart 

Nilai default nya true 

Lalu buat geter setter nya 

Buat seperti ini 

Getter nya boolean kasih naman isLightBlue => _islihtBlue ini uyntuk kemblaikan 
Set isLihtBlue nama setter lalu ada ()bool value yaitu nilai yg barunya 


Lalu pasang 
isllghtBlue = value; dgn yg baru 
Notify kasih tau kalau ada perubahan yg sedang menugu 
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apelastion 
import 
olor with Char 


isLightBlue - true, 


ue => isLightBlue, 
set isLightBlue( value) 


_iİsLightBlue = value; 
notifyListeners(); 


raiat: ptnreaa create 
: pthread cre 
: pthread join (1868 
: pthread join (186 
3dWorkerE succeed 


13:12 21:16 


IN dm Gw Fs 0 i 
lalu buat satu buah get lagi yg akan kemblikan color 

Color ini masih bolean ture dan false tergantu switch button diamana 

Color get yg akan return warna jika dia blue maka menjadi true kalau gk ember 

Color import material nya 
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Applicatic Jl 
_isLightBlue = true; 


isLightBlue => _isLightBlue; 
value) 


_İsLightBlue = value; 
notifyListeners(); 


get color => (_isLightBlue) ? .lightBlue : lors.amber, 


FAIAL: ptnreaa create |450/54/405) N35KLL5S1ngie nreaoworkert 
5 FATAL: pthread create [18650001 

FATAL: pthread join (186 

3 FATAL: pthread join [1 

FATAL: pthread join (1865000176 
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Maka sudah beres 


Sekarang kembali ke main dart 
Scafold harus kita bungkus dgn widget ganti no 
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import 


void main() => runAp 


build(E 
et n Ma ia 
home: widget|( 
child: 
appBar: 
title: 


style: 


5 FAIAL? ptnreaa create |150/54/405) N3BKLL5D1ngie nreaoworkert 
F/Effect 2 Ə : pthread create [1865000176] N3BRC18SingleThreadWo 
F/Effe K( : e 2 28 pthread_join 

F/EffectSDK(12483): 2019-08 21: 28 : pthr 

F/EffectsDK (12 ð 21: F : pthread_join [18€ 


Application finished. 


14:42 ag 
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Tambahkan dulu di pubspec yaml 
Provider: 
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* | pubpecyami x 


environment: 


sdk: 


15:06 21:16 
ia siri 2 


Jika sudah dapat package kembali ke dart 
Lalu import providers nya 
Lalu kasih changeNotifier didalam nya minta builder 


Dalamnya dain minta kemblaikan changeNotifer yaitu aplkationColor 
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main() => runApp( WN): 
{ 


build( context) { 
t ( 
home: ( 
builder: (context) => 
child: ( 
appBar: ( 
title: ( 


style: (color: .black), 
` 


[provider_state_management] flutter packages get 


Running "flutter pub get" in provider state management... 
exit code @ 


il mlm ja Si (Sisik « 
Maka sudah beres sekarang pasang consumer 

Pertama itu text karena warna itu berubah 

Agar lebih jelas kasih tipenya 

AppcationColors 

Dan consemer juga kasih tau perubahan aplikasitioncolor 

Lalu dialamnya bukan child tapi builder 

Builder ini minta satu buah mkethod kemblaikan widget 

() methodi ni perlu 3 parameter context, kedua beritaukan object kasih nama 
aplikasitionColor, ketiga kosongi saja _ 

Colors nya ganti bukan colorsBlack tapi maka yg geter tadi tergntung swithnya 
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TEEI 17:36 1 21:16” 


returr 


Playback Terjemahan Tampilan 


home: ChangeN fierPr | 
builder: (context) => Appl 
child: 
appBar: 
title: 
builder context, applicationColor, ) => 
, 
style: TextStyle(color: applicationColor.color), 
», 
» 
)s 
body: 
child: Column( 
mainAxisAlignment: MainAxisAlig t.center, 
children: «Widget»| 


Iprovider state management) flutter packages get 
Running "flutter pub get" in provider state managemen 
exit code @ 
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I) da Gw Fs 0 i 
Lalu kebawah lagi yg perubahan lagi container 

Animated bungkus widget jadi Consumer 

Buat sama 
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body: 
child: umn ( 
mainAxisAlignment: xisAl ent.center, 
childrer | 
Ime atic lor>( 
builder: (context, applicationColor, _) => 
margin: EdgeInse .a11(5), 
width: 1 
height: 16 
color: applicationColor.color, 
duration: Du n(milliseconds: 500), 
», 
», 
W( 
mainAxisAlignment : inAxisAlignment.center, 
children: «Widget» | 
r(margin: EdgeInse .all(5), child: xt( 


(provider state management) flutter packages get 


Running "flutter pub get" in provider state management... 
exit code @ 


18:28 21:16 


IN da Gw Fs 0 i 
Skearnag kita kebawah 

Siwcth juga sama 

Dgn consumer tipe aplikasiColor builder 

Value nya kita ambil dari aplikasiCOlors.isLightBlue kalau dia true maka ikut 
berubah true 


Ketika dicghange ini kita ubah 
Aplikasicolor.islightblue ganti dgn newvaluenya 
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», 
w( 
mainAxisAlignment: MainAxisAlignment.center, 
children: 
.all(5), child: xt( 15 
lor»( 
(context, applicationColor, ) 
applicationColor.isLightBlue, 
onChanged: (newValue) ( 
applicationColor.isLightBlue = newValue; 


r(margin: Edge ts.all(5), child: xt("I 


rumor 
Iprovider state management) flutter packages get 

Running "flutter pub get" in provider state manageme: 

exit code @ 


Nanas 


i a sa /sisix Ae 
Maka daiakna ganti 
Appbar ganti backroundnya 
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id main() => runApp(MyA 


Provider State Management 


return 
home: 
builder: (context) 
child: Scaff ( 
appBar: Bar ( 
backgroun - 1 .black, 
title: or / icat >( 
builder: (context, applicationColor, _) => 


, 


style: xtStyle(color: applicationColor.col 


(provider state management) flutter packages get 
Running "flutter pub get" in provider state management... 
exit code @ 
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No Configurations "GP 


main() => runApp( 


build( context) { 
t 
home: 
builder: (context) 
child: ( 
appBar: ( 
backgroundcolor: .black, 
title: « »( 
builder: (context, applicationColor, 


style: (color: applicationColor.col 


DL” 


[provider_state_management] flutter packages get 
Running "flutter pub get" in provider state management... 
exit code @ 
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Jadi speerti ni 


